<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .box{
            /* 宽高背景颜色 */
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .myimg{
            height: 500px;
            width: 500px;
            border: 2px solid red;
            /* 背景图片，在长度盈余时会自动复制平铺 */
            /* background-image: url('./塞拉1.png'); */

            /* 图像平铺，-x在水平方向平铺，-y在垂直方向平铺，no-repeat不平铺，默认为-x -y */
            /* background-repeat: no-repeat; */

            /* 
                图像大小
                可以填长度数值或占容器的百分比，第一个值为宽，第二个值为高，第二个值不设置即为auto
                cover值表示维持图片的宽高比例缩放到完全覆盖背景区域的最小大小
                contain值表示维持图片的宽高比例缩放到不超出背景区域的最大大小
            */
            /* background-size: cover; */

            /* 图像位置，第一值为水平方向，第二值为垂直方向 */
            /* background-position: right bottom; */

            /* 是否滚动，默认为scroll，在fixed情况下背景不随页面滚动而滚动 */
            /* background-attachment: fixed;使用fixed时背景图片会脱离文档流，并固定在界面的固定位置 */

            /* 复合属性，把所有属性写在一起 */
            background: url('./塞拉1.png') no-repeat left top /cover fixed;/* background-size属性需要加/ */
        }

        h3{
            height: 200px;
        }
    </style>
</head>

<body>

    <div class="box"></div>

    <div class="myimg"></div>

    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>
    <h3></h3>

</body>

</html>